---
title: Agrega integraciones
i18nReady: true
---
import IntegrationsNav from '~/components/IntegrationsNav.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import { Steps } from '@astrojs/starlight/components'


Las **Integraciones de Astro** agregan nuevas funcionalidades a su proyecto con solo unas pocas líneas de código. Tú mismo puedes escribir una integración personalizada, utilizar una integración oficial o utilizar integraciones desarrolladas por la comunidad. 

Usando integraciones puedes...

- Desbloquear React, Vue, Svelte, Solid y otros frameworks populares.
- Integrar herramientas como Tailwind y Partytown con unas pocas líneas de código.
- Agregar nuevas funcionalidades a tu proyecto, como la generación automática de sitemaps.
- Escribir código personalizado que se conecte con el proceso de compilación, el entorno de desarrollo y más.

:::tip[DIRECTORIO DE INTEGRACIONES]
Navega o busca el conjunto completo de cientos de integraciones oficiales y de la comunidad en nuestro [directorio de integraciones](https://astro.build/integrations/). Encuentra paquetes para agregar a tu proyecto Astro para autenticación, análisis, rendimiento, SEO, accesibilidad, UI, herramientas para desarrolladores y más.
:::

## Integraciones oficiales

Las siguientes integraciones son mantenidas por Astro.

<IntegrationsNav />

## Configuración de integración automática

Astro incluye un comando `astro add` para automatizar la configuración de integraciones. Varios plugins de la comunidad también se pueden agregar utilizando este comando. Consulta la documentación de cada integración para ver si se admite `astro add`, o si debes [instalar manualmente](#instalación-manual).

Puedes correr el comando `astro add` utilizando el gestor de paquetes de tu preferencia y nuestro asistente de integración automática actualizará tu archivo de configuración e instalará las dependencias necesarias.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npx astro add react
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm astro add react
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn astro add react
  ```
  </Fragment>
</PackageManagerTabs>

¡Incluso es posible agregar múltiples integraciones al mismo tiempo!

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npx astro add react tailwind partytown
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm astro add react tailwind partytown
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn astro add react tailwind partytown
  ```
  </Fragment>
</PackageManagerTabs>

:::note[Manejando dependencias de integraciones]
Si ves una advertencia con el texto `Cannot find package '[nombre-de-paquete]'` después de agregar una integración, probablemente tu gestor de paquetes no haya instalado las [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/) por ti. Para instalar los paquetes faltantes, ejecuta `npm install [nombre-de-paquete]` en la terminal.
:::

### Instalación manual

Las integraciones de Astro siempre se agregan a través de la propiedad `integrations` en tu archivo `astro.config.mjs`.

Hay tres formas comunes de importar una integración a tu proyecto Astro:
1. [Instala una integración de paquete NPM](#instalando-un-paquete-npm).
2. Importando tu propia integración desde un archivo local dentro de tu proyecto.
3. Escribiendo tu integración en línea, directamente en tu archivo de configuración.

    ```js
    // astro.config.mjs
    import { defineConfig } from 'astro/config';
    import installedIntegration from '@astrojs/vue';
    import localIntegration from './my-integration.js';

    export default defineConfig({
      integrations: [
        // 1. Importado desde un paquete npm instalado
        installedIntegration(),
        // 2. Importado desde un archivo JS local
        localIntegration(),
        // 3. Un objeto en línea
        {name: 'namespace:id', hooks: { /* ... */ }},
      ]
    });
    ```

Consulta la referencia de [API de integración](/es/reference/integrations-reference/) para conocer las diferentes formas en las que puedes escribir una integración.

#### Instalando un paquete NPM

Instala una integración de paquete NPM utilizando un gestor de paquetes, y luego actualiza `astro.config.mjs` manualmente.

Por ejemplo, para instalar la integración `@astrojs/sitemap`:
<Steps>
1. Instala la integración en las dependencias de tu proyecto utilizando tu gestor de paquetes preferido:

   <PackageManagerTabs>
     <Fragment slot="npm">
     ```shell
     npm install @astrojs/sitemap
     ```
     </Fragment>
     <Fragment slot="pnpm">
     ```shell
     pnpm add @astrojs/sitemap
     ```
     </Fragment>
     <Fragment slot="yarn">
     ```shell
     yarn add @astrojs/sitemap
     ```
     </Fragment>
   </PackageManagerTabs>

2. Importa la integración a tu archivo `astro.config.mjs` y agrégala a tu array `integrations[]`, junto con cualquier opción de configuración:

    ```js title="astro.config.mjs" ins={2} ins="sitemap()"
    import { defineConfig } from 'astro/config';
    import sitemap from '@astrojs/sitemap';

    export default defineConfig({
      // ...
      integrations: [sitemap()],
      // ...
    });
    ```

    Nota que diferentes integraciones pueden tener diferentes configuraciones. Lee la documentación de cada integración y aplica cualquier configuración necesaria a la integración que hayas elegido en `astro.config.mjs`
</Steps>

### Opciones personalizadas

Las integraciones casi siempre se crean como factory function que devuelven el objeto de integración real. Esto te permite pasar argumentos y opciones a la factory function que personaliza la integración para tu proyecto.

```js
integrations: [
  // Ejemplo: personaliza tu integración con argumentos de función
  sitemap({filter: true})
]
```

### Activar una Integración

Las integraciones _falsy_ (con valor falso) son ignoradas, de esta forma puedes activar o desactivar integraciones sin preocuparte por valores `undefined` o booleanos abandonados.

```js
integrations: [
  // Ejemplo: Omitir la generación de un sitemap en Windows
  process.platform !== 'win32' && sitemap()
]
```

## Actualizando integraciones

Para actualizar todas las integraciones oficiales a la vez, ejecuta el comando `@astrojs/upgrade`. Este actualizará tanto Astro como todas las integraciones oficiales a sus última versiones.

### Actualización Automática

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # Actualiza Astro y las integraciones oficiales a la última versión
  npx @astrojs/upgrade
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # Actualiza Astro y las integraciones oficiales a la última versión
  pnpm dlx @astrojs/upgrade
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # Actualiza Astro y las integraciones oficiales a la última versión
  yarn dlx @astrojs/upgrade
  ```
  </Fragment>
</PackageManagerTabs>

### Actualización Manual

Para actualizar una o más integraciones manualmente, utiliza el comando apropiado para tu gestor de paquetes.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # Ejemplo: actualiza las integraciones de React y Tailwind
  npm install @astrojs/react@latest @astrojs/tailwind@latest
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # Ejemplo: actualiza las integraciones de React y Tailwind
  pnpm add @astrojs/react@latest @astrojs/tailwind@latest
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # Ejemplo: actualiza las integraciones de React y Tailwind
  yarn add @astrojs/react@latest @astrojs/tailwind@latest
  ```
  </Fragment>
</PackageManagerTabs>

## Eliminando una Integración

Para eliminar una integración, primero desinstala la integración de tu proyecto

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm uninstall @astrojs/react
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm remove @astrojs/react
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn remove @astrojs/react
  ```
  </Fragment>
</PackageManagerTabs>

Después, elimina la integración de tu archivo `astro.config.*`:

```js title="astro.config.mjs" del={3,7}
import { defineConfig } from 'astro/config'
import react from "@astrojs/react";

export default defineConfig({
  integrations: [
    react()
  ]
});
```

## Encontrar más integraciones

Puedes encontrar muchas integraciones desarrolladas por la comunidad en el [Directorio de Integraciones de Astro](https://astro.build/integrations/). Sigue los enlaces para obtener instrucciones detalladas de uso y configuración.

## Construyendo tu propia integración

La API de integración de Astro está inspirada en Rollup y Vite, y está diseñada para sentirse familiar para cualquiera que haya escrito antes un plugin de Rollup o Vite.

Consulta la referencia [API de integración](/es/reference/integrations-reference/) para saber qué pueden hacer las integraciones y cómo escribir una tú mismo.
